<template>
    <div class=''>
        <el-table :data="tableData" height="250" border style="width: 100%">
            <el-table-column label="" width="50">
                <template slot-scope="scope">
                    <i class="el-icon-pie-chart" @click="handleEdit(scope.$index, scope.row)"
                        style="cursor: pointer;"></i>
                </template>
            </el-table-column>
            <el-table-column :prop="itme" :label="itme" width="160" v-for="itme in tabKey" :key="itme">
            </el-table-column>

        </el-table>
        <el-button type="primary" @click="threeTab">3月</el-button>
        <el-button type="primary" @click="seven">6月</el-button>
        <el-button type="primary" @click="oneYarn">1年</el-button>
        <el-button type="primary" @click="report">原始报表</el-button>
        <el-button type="primary" @click="growth">同比增长率</el-button>


        <el-dialog title="" :visible.sync="dialogVisible" @open="open()">
            <div style="width: 100%;height:300px;" id="cashflowTable"></div>
        </el-dialog>
    </div>
</template>

<script>
import *as Highcharts from 'highcharts'
export default {
    name: '',
    components: {},
    data() {
        return {
            title: '',
            dialogVisible: false,
            itme: 0,
            falg: false,
            data1: [],//里面的数据
            data2: [],//表头
            tabKey: [],
            tableData: [],
        }
    },
    created() {
        this.getTable3()
    },
    mounted() {
    },
    methods: {

        report() {
            this.getTable3()
        },
        growth() {//点击查看同比增长率
            this.$axios.get('http://localhost:8089/test/growth').then((res) => {
                console.log(res, '11111111');
                this.tableData = res.data.data
                this.getInfo()
            })
        },
        open() {
            this.$nextTick(() => {
                this.getCharts()
            })
        },

        getCharts() {
            var chart = Highcharts.chart('cashflowTable', {
                credits: {
                    enabled: false // 禁用版权信息
                },
                chart: {
                    type: 'column'
                },
                title: {
                    text: this.title
                },
                xAxis: {
                    categories: this.data2
                },
                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    // formatter: function () {
                    // 	return '<b>' + this.x + '</b><br/>' +
                    // 		this.series.name + ': ' + this.y + '<br/>' +
                    // 		'总量: ' + this.point.stackTotal;
                    // }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal'
                    }
                },
                series: [{
                    name: '',
                    data: this.data1,
                }]
            });
        },


        //默认获取三个月的数据
        getTable3() {
            this.$axios.get('http://localhost:8089/test/march', {}).then((res) => {
                console.log(res.data.data, '4444');
                this.tableData = res.data.data
                this.getInfo()
                console.log(this.tableData, '三个月的数据');
            })
        },

        //点击获取当前行的数据
        handleEdit(index, row) {
            this.dialogVisible = true;
            console.log(index);
            console.log(row);
            let arr1 = []
            let arr2 = []
            for (const key in row) {
                if (row[key]) {
                    arr1.push(row[key])
                    arr2.push(key)
                }
            }
            this.title = arr1[0]
            console.log(arr1, '222');
            console.log(arr2, '333');
            this.data1 = arr1.splice(1)
            this.data2 = arr2.splice(1)
            console.log(this.data1, this.data2);
        },

        // async getInfos() {
        //     const res = await cashTable({ companyId: 1, type: 3, monthNumber: 3 })
        //     console.log(res, '66666');
        // },
        getInfo() {
            let key1 = []
            //提取表头字段====
            for (let i = 0, l = this.tableData.length; i < l; i++) {
                for (let key in this.tableData[i]) {
                    if (key1.indexOf(key) == -1) {
                        key1.push(key)
                    } else {
                        console.log("============xxxx===========")
                    }
                }
            }
            this.tabKey = key1
        },
        //点击查看三个月
        threeTab() {
            this.getTable3()
            console.log(this.tableData, '点击查看三个月的报表');
        },

        //点击查看六个月报表
        seven() {
            this.$axios.get('http://localhost:8089/test/june', {}).then((res) => {
                console.log(res, '00000');
                this.tableData = res.data.data
                console.log(this.tableData, '点击查看六个月报表');
                this.getInfo()
            })
        },

        //点击查看一年报表
        oneYarn() {
            console.log(this.tableData, '12121212');
            this.$axios.get('http://localhost:8089/test/year', {}).then((res) => {
                console.log(res, '00000');
                this.tableData = res.data.data
                this.getInfo()
                console.log(this.tableData, '11111');
            })
            console.log('点击查看一年报表');
        },
    }
}
</script>
<style scoped lang='scss'>
body .el-table th.gutter {
    display: table-cell !important;
}

//重写表格样式，不在自动计算，解决表格渲染时闪烁问题，设置table容器高度/行数
// .el-table .cell{
//   height:20px!important;
// }
</style>
